<template>
    <el-row>
        <el-col :span="3">
            <left-nav-menu :length="4" @select="leftMenuSelect">
                <span slot="0"><i class="icon-list"/>基本信息</span>
                <span slot="1"><i class="icon-id-card"/>有效证照</span>
                <span slot="2"><i class="icon-note"/>设计资料</span>
                <span slot="3"><i class="icon-rain"/>气象水文资料</span>
            </left-nav-menu>
        </el-col>
        <el-col :span="21">
            <keep-alive>
                <enterprise-status v-if="leftNavMenuIndex==='0'"></enterprise-status>
                <valid-license v-if="leftNavMenuIndex==='1'"></valid-license>
                <design-resources v-if="leftNavMenuIndex==='2'"></design-resources>
                <meteorological-hydrological v-if="leftNavMenuIndex==='3'"></meteorological-hydrological>
            </keep-alive>
        </el-col>
    </el-row>
</template>

<script>
    import TopNavMenu from '~/components/TopNavMenu'
    import LeftNavMenu from "~/components/LeftNavMenu";
    import EnterpriseStatus from "~/views/basic-information/EnterpriseStatus";
    import ValidLicense from "~/views/basic-information/ValidLicense";
    import DesignResources from "~/views/basic-information/DesignResources";
    import MeteorologicalHydrological from "~/views/basic-information/MeteorologicalHydrological";

    export default {
        name: "BasicInformation",
        data(){
            return{
                leftNavMenuIndex:'0'
            }
        },
        components:{
            TopNavMenu,LeftNavMenu,EnterpriseStatus,ValidLicense,DesignResources,MeteorologicalHydrological
        },
        methods:{
            leftMenuSelect(index){
                this.leftNavMenuIndex=index;
            }
        },
        
    }
</script>

<style scoped>
    span{
        font-size: 1.4em;
    }
    i{
        margin-right: 12px;
        font-size: 1.2em;
        color: black;
    }
</style>